<template>
	<div class="container">
		<div class="tab">
			<router-link to="/GroupScheduleView"><el-button type="primary" class="tk">团课课程</el-button></router-link>
			<router-link to="/LeagueClassView"><el-button class="tk">团课课表</el-button></router-link>
		</div>
		<div>
			<el-form :inline="true" class="demo-form-inline">
				<el-form-item>
					<el-select placeholder="请选择课程教练">
						<el-option
                  v-for="item in coachList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.id"
                />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" class="inquire" :icon="Search">查询</el-button>
					<el-button @click="centerDialogVisible = true" class="inquire">添加排期</el-button>
				</el-form-item>
			</el-form>
		</div>
		<!-- <router-link to="/list"><el-button class="inquire">列表</el-button></router-link> -->
		<!-- 路由跳转处 -->
		<div>
			<div>
   <el-table :data="tableData" border style="width: 100%">
	   <el-table-column prop="name" label="课程名称" width="200" />
	   <el-table-column prop="coachName" label="教练" width="200" />
	   <el-table-column prop="venuesAddress" label="场馆" width="250" />
	   <el-table-column prop="venuesName" label="场地" width="250" />
	   <el-table-column prop="courseTime" label="课程时间" width="220" />
	    <el-table-column prop="orderNumber" label="预约人数" width="220" />
		<el-table-column label="操作" width="300">
	      <template #default="s">
			  <router-link :to="'/EditorialGroupView?id='+s.row.id"> <el-button class="operation" type="primary" :icon="Edit">编辑</el-button>
			</router-link>
			  <!-- <router-link to="/AppointmentView"><el-button class="operation" type="primary">预约记录</el-button></router-link> -->
			  <el-button type="danger" :icon="Delete">删除 </el-button>
	      </template>
	    </el-table-column>
  </el-table>
  </div>
 
  <div class="fenye">
              <el-pagination background layout="prev, pager, next" :total="100" :page-size="5">
              </el-pagination>
          </div>
		</div>
		<!-- 详情模态框 -->
		<el-dialog v-model="centerDialogVisible" title="添加排期" width="800px" align-center>
			<div class="add">
				<el-form v-model="tableList">
					<el-form-item label="场馆选择" v-model="tableList.name">
                    <el-select  placeholder="请选择场馆">
                    <el-option>
                    </el-option>
                </el-select>
            </el-form-item>
			<el-form-item label="教练" prop="coachId">
                <el-select placeholder="请选择教练">
					<el-option
                  v-for="item in coachList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.id"
                />
                </el-select>
            </el-form-item>
			<el-form-item label="课程">
                <el-select placeholder="请选择课程">
                    <el-option>
                    </el-option>
                </el-select>
            </el-form-item>
			<el-form-item label="日期">
                <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
                </el-date-picker>
             </el-form-item>
           
            <el-form-item label="结束时间">
               <el-input></el-input>
            </el-form-item>
			<el-form-item>
                <el-button type="primary" @click="NewEdit" class="add">立即添加</el-button>
            </el-form-item>
    </el-form>
			</div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { Edit,Delete ,Search} from '@element-plus/icons-vue';//icon图标
import { ref } from "vue";
import { GroupHooks,Groups } from '../hooks/GroupHooks';
const _GroupHooks:Groups=GroupHooks()
_GroupHooks.groupClassList(getClassList)
const tableData = ref<Array<any>>([])
const total = ref<Array<any>>([])
function getClassList(data:any,count:any){
	tableData.value=data
	total.value=count
}

const centerDialogVisible: Boolean = ref(false);

//教练接口
_GroupHooks.getCoachList(coachData)
const coachList=ref<Array<any>>([])
function coachData(data:any){
   coachList.value=data
 }


 const tableList=ref<object>({
  classOrderNumber: 0,
  coachName:'',
  courseId: 0,
  dayClass: 0,
  endTime: "",
  startDate: "",
  startTime: "",
  venuesId: 0
})

//添加事件
function NewEdit(){
        _GroupHooks.getCourseAddCourseSchedule({...tableList.value})
      
}

</script>


<style type="text/css" scoped>
.tab {
	margin-bottom: 20px;
}

>>>th div {
	text-align: center;
}

>>>td div {
	text-align: center;
}

.fenye{
       margin-top: 10px;
        display: flex;
        justify-content: flex-end;
	}
.tk {
	width: 150px;
	height: 40px;
	margin: 20px 10px 20px 0;

}

.inquire {
	width: 100px;
	height: 35px;
	margin: 0 5px 10px 0;
}

.el-form--inline .el-form-item {
	vertical-align: top;
}

::v-deep .el-dialog__header {
	background-color: #2f3e4d;
	margin: 0;
}

::v-deep .el-dialog__title {
	color: #fff;
}
.el-select  {
	width: 300px;
	height: 40px;
}

>>>.el-form-item__label{
	width: 100px;
}
.add{
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.operation{
		margin-right:5px ;
	}
</style>